<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ongoing{
            display: flex;
            width: 300px;
            height: 50px;
            align-items: center;
            justify-content: space-between;
        }
        .circle{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: blue;
            color: #fff;
            text-align: center;
        }
        .todo-item{
            width: 300px;
            height: 30px;
            display: flex;
            background-color: #999;
            align-items: center;
            justify-content: space-between;
        }
    </style>

</head>
<body>
    <div id="app">
        <todo-input :value="text" @change="text=$event" @click="add"></todo-input>
        <div class="ongoing">
            <h4>正在进行</h4>
            <div class="circle">{{todoList.length}}</div>
        </div>
        <todo-item v-for="untodo in untodoList" :key="untodo.title" :title="untodo.title" :done="untodo.done" 
        @click1="untodo.done = $event" @click2="del"></todo-item>
        <div class="ongoing">
            <h4>已经完成</h4>
            <div class="circle">{{todoList.length}}</div>
        </div>
        <!-- 这里是我点那个，那个$event就会接收值 -->
        <todo-item v-for="donetodo in donetodoList" :key="donetodo.title" :title="donetodo.title" :done="donetodo.done"  
        @click1="donetodo.done = $event" @click2="del"></todo-item>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>

        // :value="value",这里的value是input中有一个value属性
        Vue.component("TodoInput",{
            template:`<div>
                        <h3>todoList</h3>
                        <input type="text" :value="value" @keyup.enter="$emit('click',value)" @input="$emit('change',$event.target.value)">
                        <button @click="$emit('click',value)">添加</button>
                      </div>`,

            props:{
                value:{
                    type:String,
                }
            }
        })


        Vue.component("TodoItem",{
            template: `<div class="todo-item">
                          <div>
                            <input type="checkbox" @click="$emit('click1',!done)">{{title}}
                          </div>
                          <button @click="$emit('click2',title)">删除</button>
                       </div>`,
            props:{
                title:{
                    type:String,
                },
                done:{
                    type:Boolean,
                    default:false
                }
            }
        })


        // 根组件
        var vm = new Vue({
            el:"#app",
            data:{
                text:"",
                todoList:[]
            },
            methods:{
                add($event){
                    this.todoList.unshift({title:$event,done:false})
                    this.text = ""
                },
                del($event){
                    const index = this.todoList.findIndex((todo2) => todo2.title === $event);
                    this.todoList.splice(index,1)
                }
            },
            computed:{
                untodoList(){
                    return this.todoList.filter((todo) => todo.done === false);
                },
                donetodoList(){
                    return this.todoList.filter((todo1) => todo1.done === true);
                }
            }
        }) 
    </script>



</body>
</html>